<template>
    <div class="index-container">
        <div class="mine">

            <!-- 头部操作栏 -->
            <div class="mine-top clear">
                <span class="fl">我的档案</span>
                <button v-if="!editable" @click="editable=true" class="edit fr">编辑</button>
                <button v-if="editable" class="save fr" @click="saveInfo">保存</button>
                <button v-if="editable" @click="cancel" class="cancel fr">取消</button>
                <button @click="exportSelect" class="export fr">导出PDF</button>
            </div>
            <!-- <div class="mine-top clear" v-if="val.name==tabPosition" v-for="(val,key) in controlsBar" :key="key">
                <span class="fl">我的档案</span>
                <button v-if="!val.edit" @click="val.edit=true" class="edit fr">编辑</button>
                <button v-if="val.edit" class="save fr" @click="saveInfo(key)">保存</button>
                <button v-if="val.edit"  @click="cancel(key)" class="cancel fr">取消</button>
                <button class="export fr">导出PDF</button>
            </div> -->

            <!-- 我的信息 -->
            <!--startprint-->
            <div class="my-info">
                <div class="clear">
                    <div class="fl">
                        <img v-if="photo" :src="BASE_URL+photo" class="fl" alt="头像" />
                        <div class="fl">
                            <p>
                                真实姓名：<span v-if="!editName || !editable">{{userName}}</span>
                                        <input @keydown.13="setName" @blur="setName" v-if="editable && editName" type="text" v-model="userName"/>
                                        <img @click="changeName" class="pointer" src="../../../assets/images/schoolroll/形状.png" alt="编辑姓名按钮" />
                                姓名拼音：<span v-if="!editPinyin || !editable">{{pinyin}}</span>
                                        <input @keydown.13="setPinyin" @blur="setPinyin" v-if="editable && editPinyin" type="text" v-model="pinyin"/>
                                        <img @click="changePinyin" class="pointer" src="../../../assets/images/schoolroll/形状.png" alt="编辑拼音按钮" />
                            </p>
                            <button @click="uploadImg">更换照片</button>
                        </div>
                    </div>
                    <div class="fr">
                        <img v-if="statusImg" :src="statusImg" alt="状态图标 " />
                        <span>状态</span>
                    </div>
                </div>
            </div>

            <!-- tab栏 -->
            <div class="tabs" v-if="!printView">
                <el-radio-group v-model="tabPosition" >
                    <el-radio-button label="base">基础信息</el-radio-button>
                    <el-radio-button label="family">家庭信息</el-radio-button>
                    <el-radio-button label="origin">来源信息</el-radio-button>
                    <el-radio-button label="other">其他信息</el-radio-button>
                </el-radio-group>
            </div>

            <div class="information">
                <p class="printView" v-if="printView">基础信息</p>
                <div v-show="tabPosition=='base' || printView" :style="{'padding-bottom': printView ? '0' : '61px'}">
                    <base-info @changeSaveStatus="changeSaveStatus" ref="base" :editable="editable" @getName="getName" @getPinyin="getPinyin" @getStatus="getStatus" @getPhoto="getPhoto" />
                </div>

                <p class="printView" v-if="printView">家庭信息</p>
                <div v-show="tabPosition=='family' || printView" :style="{'padding-bottom': printView ? '0' : '53px'}">
                    <family-info @changeSaveStatus="changeSaveStatus" ref="family" :editable="editable" />
                </div>

                <p class="printView" v-if="printView">来源信息</p>
                <div v-show="tabPosition=='origin' || printView" :style="{'padding-bottom': printView ? '0' : '63px'}">
                    <origin-info @changeSaveStatus="changeSaveStatus" ref="origin" :editable="editable" />
                </div>

                <p class="printView" v-if="printView">其他信息</p>
                <div v-show="tabPosition=='other' || printView" :style="{'padding-bottom': printView ? '0' : '63px'}">
                    <other-info @changeSaveStatus="changeSaveStatus" ref="other" :editable="editable" />
                </div>

            </div>
            <!-- <div class="information">
                <div v-show="tabPosition=='base'" style="padding-bottom:61px;">
                    <base-info ref="base" :editable="controlsBar[0].edit" />
                </div>

                <div v-show="tabPosition=='family'" style="padding-bottom:53px;">
                    <family-info ref="family" :editable="controlsBar[1].edit" />
                </div>

                <div v-show="tabPosition=='origin'" style="padding-bottom:63px;">
                    <origin-info ref="origin" :editable="controlsBar[2].edit" />
                </div>

                <div v-show="tabPosition=='other'" style="padding-bottom:63px;">
                    <other-info ref="other" :editable="controlsBar[3].edit" />
                </div>

            </div> -->
        </div>

        <!-- 提示弹窗 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'提示'"
            :visible.sync="showWarning"
            width="400px">
            <p class="warning">你有数据未保存，是否确认取消？</p>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showWarning = false" type="primary" plain>取消</el-button>
                <el-button @click="cancelEdit" type="primary">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
    import baseInfo from './base-info.vue'
    import familyInfo from './family-info.vue'
    import originInfo from './origin-info.vue'
    import otherInfo from './other-info.vue'
    export default {
        data(){
            return {
                printView: false,   // 当点击打印PDF时值为true，打印完为false
                editable:false,      // 控制表单是否在编辑状态
                // controlsBar:[
                //     {
                //         name:'base',    // 信息类型
                //         edit:false     //是否在编辑状态
                //     },{
                //         name:'family',    // 信息类型
                //         edit:false     //是否在编辑状态
                //     },{
                //         name:'origin',    // 信息类型
                //         edit:false     //是否在编辑状态
                //     },{
                //         name:'other',    // 信息类型
                //         edit:false     //是否在编辑状态
                //     }
                // ],
                tabPosition:'base',     // tabs当前选中栏的name
                editName:false,     // 控制是否编辑真实姓名
                userName:'',     // 用户名
                editPinyin:false,     // 控制是否编辑真实姓名
                pinyin:'',      // 拼音
                photo:'',    // 头像
                statusImg:'',    // 状态图片,默认正常
                showWarning: false,   // 数据为保存提示弹窗
                saveStatus: [],   // 存放当前四个板块保存信息的状况
            }
        },
        created(){
            // 获取轮播图信息
            // this.getList();
        },
        components:{
            baseInfo,
            familyInfo,
            originInfo,
            otherInfo
        },
        watch:{
            saveStatus: {
                handler:function(newVal, oldVal){
                    if(newVal.length >= 4){
                        let status = newVal.every( item => item == true );

                        if(status){
                            this.$message.success('操作成功！')
                        }else{
                            this.$message.error('操作失败！');
                        }

                        newVal.length = 0;
                    }
                },
                deep: true
            }
        },
        methods:{
            // 提供给子组件修改保存状态的方法
            changeSaveStatus(val){
                this.saveStatus.push(val);
            },
            /**
             * 获取初始化信息
             * @param {Number} key 1基础信息 || 2家庭信息 || 3来源信息 || 4其他信息
             */
            // getList() {
            //     let success = (res => {
            //         this.basicscList = deep_clone(res.data);
            //         this._basicscList = deep_clone(res.data);
            //         // console.log(this.basicscList)
                
            //     });
            //     let params = {
            //         user_id: this.$g.user_id,
            //         from_type: 1,
            //     }
                
            //     this.$ajax.get('api/studystatus/studystatus_info', {params, func: {success: success}})
            // },
            changeName(){
                if(!this.editable){
                    this.notEdit()
                    return
                }

                if(!this.editName){
                    this.editName = true;
                }else{
                    this.editName = false;
                }
            },
            // 修改名字
            setName(){
                // console.log('setName:',this.userName)
                this.$refs.base.changeRealName(this.userName)
                this.editName = false;
            },
            // 获取名字
            getName(name){
                if(name){
                    this.userName = name;
                }
                this.editName = false;
            },
            changePinyin(){
                if(!this.editable){
                    this.notEdit()
                    return
                }

                if(!this.editPinyin){
                    this.editPinyin = true;
                }else{
                    this.editPinyin = false;
                }
            },
            // 修改拼音
            setPinyin(){
                // console.log('setPinyin:',this.pinyin)
                this.$refs.base.changePinyin(this.pinyin)
                this.editPinyin = false;
            },
            // 获取拼音
            getPinyin(pinyin){
                // console.log('setPinyin',pinyin)
                if(pinyin){
                    this.pinyin = pinyin;
                }
                this.editPinyin = false;
            },
            // 更改头像
            uploadImg(){
                if(!this.editable){
                    this.notEdit()
                    return
                }

                var that = this;
                // console.log('uploadImg')
                var input = document.createElement('input');
                input.type = 'file';
                input.click()

                input.onchange = function(){
                    var imgData = this.files[0]

                    var formdata = new FormData();

                    formdata.append('file',imgData);

                    let success = res => {
                        // console.log(res.data)
                        var imgUrl = res.file_path;
                        that.photo = imgUrl;
                        that.$refs.base.changeTouxiang(imgUrl)
                    }

                    that.$ajax({
                        url:'/api/resource/res_upload',
                        method:'post',
                        data:formdata,
                        headers:{'content-type':'multipart/form-data'},
                        func: { success: success }
                    })

                }

            },
            notEdit(){
                this.$message.warning('目前是非编辑状态')
            },
            getStatus(status, classID){
                var statusArr = [
                        require('../../../assets/images/schoolroll/正常.png'),   // 正常
                        // require('../../../assets/images/schoolroll/劝退.png'),   // 劝退
                        // require('../../../assets/images/schoolroll/休学.png'),   // 休学
                        // require('../../../assets/images/schoolroll/转出.png'),   // 转出
                        // require('../../../assets/images/schoolroll/开除学籍.png'),   // 开除学籍
                        require('../../../assets/images/schoolroll/已毕业.png'),   // 已毕业
                        require('../../../assets/images/schoolroll/异动.png'),   // 异动
                        require('../../../assets/images/schoolroll/其它.png')   // 其它
                    ]

                // 若不存在classID班级id则属于游离状态，隶属于其它状态
                if(!classID){
                    this.statusImg = statusArr[3]
                }else if(status === null || status == 1){
                    this.statusImg = statusArr[0];
                }else if(status >=2 && status <= 5){
                    this.statusImg = statusArr[2];
                }else if(status == 6){
                    this.statusImg = statusArr[1];
                }else{
                    this.statusImg = statusArr[3]
                }
            },
            getPhoto(photo){
                // console.log('setPhoto',photo)
                this.photo = photo
            },
            // 改变tab栏触发的事件
            // changeTab(label){
            //     console.log(label)
            // },
            // 保存信息
            saveInfo(key){
                for(var key in this.$refs){

                    // 如果有一个信息有过修改，则发送4个修改信息请求
                    if(this.$refs[key].contrast() === false){

                        for(var key in this.$refs){
                            // console.log(key)
                            this.$refs[key].submitForm();
                        }

                        this.editable = false;

                        return

                        // 执行对应页面的保存方法
                        // var res = this.$refs[this.tabPosition].submitForm();

                        // if(res){
                        //     this.editable = false;
                            // this.controlsBar[key].edit = false;
                            // return false;
                        // }
                    }

                }
    
                // 如果所有信息都没有修改则直接退出编辑状态
                this.editable = false;

            },
            // 点计取消编辑按钮时检测时候有过修改，若没有修改则直接退出编辑状态，反则弹窗提示操作
            cancel(key){
                // console.log('cancel')
                for(var key in this.$refs){
                    if(this.$refs[key].contrast() === false){
                        this.showWarning = true;
                        return
                    }
                }

                this.editable = false;

                // 此处应先初始化数据
                // this.controlsBar[key].edit = false;
            },
            // 提示弹窗中取消编辑操作
            cancelEdit(){
                this.showWarning = false;
                this.editable = false;
                for(var key in this.$refs){
                    this.$refs[key].cancelEdit()
                }
            },
            /**
             * 导出档案信息
             */
            exportSelect() {

                // this.$ajax.post("api/studystatus/download_student_status", {id:this.$g.user_id}, {responseType: 'blob' }).then(res => {
                //     let filename = res.headers['content-disposition'] ? decodeURIComponent(res.headers("Content-Disposition").split(";")[1].split("filename=")[1]) : "档案管理编辑" + '.xls';
                //     let blob = res.data;
                //     // console.log(res, "blob type:", typeof blob)
                
                //     var blobURL = window.URL.createObjectURL(blob);
                //     var tempLink = document.createElement('a');
                //     tempLink.style.display = 'none';
                //     tempLink.href = blobURL;
                //     tempLink.setAttribute('download', filename); 

                //     if (typeof tempLink.download === 'undefined') {
                //         tempLink.setAttribute('target', '_blank');
                //     }
                    
                //     document.body.appendChild(tempLink);
                //     tempLink.click();
                //     document.body.removeChild(tempLink);
                //     window.URL.revokeObjectURL(blobURL);
                // })

                // 编辑状态不能打印
                if(this.editable){
                    this.$message.warning('编辑状态下无法打印')
                    return
                }

                let head = document.querySelector('.headder'),
                    footer = document.querySelector('.footer'),
                    mineTop  = document.querySelector('.mine-top'),
                    tabs  = document.querySelector('.tabs');

                this.printView = true;

                this.editable = true;

                head.style.display = 'none';
                footer.style.display = 'none';
                mineTop.style.display = 'none';
                tabs.style.display = 'none';

                this.$nextTick(()=>{
                    window.print();

                    head.style.display = 'block';
                    footer.style.display = 'block';
                    mineTop.style.display = 'block';
                    tabs.style.display = 'block';

                    this.printView = false;
                    this.editable = false;

                })

            },
        }
    }
</script>

<style type="text/css" lang="scss">
    #schoolroll{
        .index-container{
            width:1200px;
            margin:0 auto;
            background: #fff;
            .mine{
                margin-bottom:38px;
                padding:0 40px;
                // 头部操作栏
                .mine-top{
                    padding:19px 0;
                    height:32px;
                    line-height:32px;
                    font-size:14px;
                    letter-spacing: 0.08px;
                    border-bottom: 1px dashed #DDDDDD;
                    span{
                        color: #000000;
                    }
                    button{
                        margin-left:10px;
                        padding:0 20px;
                        height:32px;
                        box-sizing:border-box;
                        border-radius: 4px;
                        &.save,&.edit{
                            color: #FFFFFF;
                            background: #348EFC;
                        }
                        &.cancel{
                            color: #7C9BB8;
                            background: #DEEFFF;
                        }
                        &.export{
                            color: #666666;
                            background: #fff;
                            border: 1px solid #DDDDDD;
                        }
                    }
                }

                // 我的信息
                .my-info{
                    padding-top:26px;

                    >div{
                        height:120px;
                        background: linear-gradient(180deg,#87D1FE,#AEDAFF);
                        >div.fl{
                            margin:23px 0 0 18px;
                            >img{
                                padding:2px;
                                width:70px;
                                height:70px;
                                object-fit:cover; 
                                border-radius:50%;
                                background: #fff;
                            }
                            >div{
                                margin-left:16px;
                                height:74px;
                                >p{
                                    position:relative;
                                    height:36px;
                                    line-height: 36px;
                                    font-size: 14px;
                                    color: #000000;
                                    letter-spacing: 0.08px;
                                    vertical-align:middle;
                                    input{
                                        padding:0 10px;
                                        width:150px;
                                        height:34px;
                                        vertical-align:middle;
                                    }
                                    img{
                                        // position:relative;
                                        // top:50%;
                                        // right:0;
                                        // transform:translateY(-50%);
                                        width:16px;
                                        height:16px;
                                        margin:0 42px 0 12px;
                                        vertical-align:middle;
                                    }
                                }
                                >button{
                                    margin-top:4px;
                                    padding:0 5px;
                                    height:32px;
                                    box-sizing:border-box;
                                    border-radius: 4px;
                                    color: #FFFFFF;
                                    background: #348EFC;
                                }
                            }
                        }
                        >div.fr{
                            margin:15px 32px 0 0;
                            width:58px;
                            img{
                                width:58px;
                                height:68px;
                                object-fit:cover;
                            }
                            span{
                                display:block;
                                margin:4px auto 0;
                                width:46px;
                                height:20px;
                                line-height:20px;
                                text-align:center;
                                font-size: 12px;
                                color: #FFFFFF;
                                letter-spacing: 0.07px;
                                background: #699AE4;
                                border-radius: 10px 3px;
                            }
                        }
                    }
                }

                // tab栏
                .tabs{
                    margin:30px auto 40px;
                    text-align:center;
                   //  .el-radio-group{
                   //      display:block;
                   // }     
                }

                主体信息
                .el-form{
                    .el-form-item{
                        width:500px;
                        &:nth-child(odd){
                            float:left;
                        }
                        &:nth-child(even){
                            float:right;
                        }
                        .el-form-item__label{
                            padding:0;
                            font-size: 14px;
                            color: #333333;
                            letter-spacing: 0.08px;
                            &::before{
                                content:''
                            }
                        }
                        .el-form-item__content{
                            // 日期编辑框
                            .el-date-editor{
                                width:100%;
                                cursor:opinter;
                            }
                            // 下拉选择框
                            .el-select{
                                width:100%;
                                .el-input{
                                    .el-input__suffix{
                                        .el-input__suffix-inner{
                                            .el-select__caret{
                                                color:#231815;
                                            }
                                        }
                                    }
                                }
                            }
                            // 单选框
                            .el-radio-group{
                                .el-radio{
                                    .el-radio__input{
                                        .el-radio__inner:hover{
                                            border-color: #3bb;
                                        }
                                    } 
                                }

                                // 被选中后的样式
                                .el-radio.is-checked{
                                    .el-radio__input.is-checked{
                                        .el-radio__inner{
                                            border-color: #3bb;
                                            background: #3bb;
                                            &:hover{
                                                border-color: #3bb;
                                            }
                                        }
                                    } 
                                    .el-radio__label{
                                        color:#606266;
                                    }
                                }
                            }
                            // areatext输入框
                            .el-textarea{
                                .el-textarea__inner{
                                    height:80px;
                                    resize:none;
                                }
                                .el-input__count{
                                    background: transparent;
                                    bottom: -8px;
                                    right: 8px;
                                }
                                // 在不可编辑时的样式
                                &.is-disabled{
                                    .el-textarea__inner{
                                        color: #333;
                                        border-radius:0;
                                        background-color: #EFEFEF;
                                        border-color: #DDDDDD;
                                    }
                                }
                            }
                            // input框不可编辑时的样式
                            .el-input.is-disabled{
                                .el-input__inner{
                                    color: #333;
                                    border-radius:0;
                                    background-color: #EFEFEF;
                                    border-color: #DDDDDD;
                                }
                            }
                        }
                    }
                }

                .printView{
                    padding: 50px;
                    font-size: 32px;
                    text-align: center;
                }
            }
        }

        .el-dialog {
            .el-dialog__header {

                background-color: #338efc;
                padding: 8px 20px 8px;

                .el-dialog__title {
                    color: #fff;
                    font-size: 14px;
                }
                
                .el-dialog__headerbtn {
                    top: 8px;

                }

                .el-dialog__headerbtn .el-dialog__close {
                    color: #fff;
                    font-size: 24px;
                }

                .el-dialog__headerbtn .el-dialog__close:hover {
                    color: rgba(255, 255, 255, 0.8);
                }

            }

            .el-dialog__body{
                padding: 0;

                .warning{
                    margin-top: 48px;
                    margin-bottom: 10px;
                    text-align: center;
                }
            }

            .el-dialog__footer{
                padding: 30px 0;
                
                .dialog-footer{
                    margin: 0 auto;
                    width: 146px;
                    
                    .el-button{
                        padding: 0;
                        width: 68px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 14px;
                        border: 0 none;

                        &:first-child{
                            color: #7C9BB8;
                            background: #DEEFFF;
                        }
                    }

                }

            }

        }
    }
</style>